<template>
    <view :class="['contanier', isWeixinBrowser ? 'contanier-default-open' : '']">
        <!-- <view class="button">
			<u-button :ripple="true" type="primary" @click="download('ios')">
				<u-icon name="apple-fill"></u-icon>
				iPhone下载
			</u-button>
			<u-button :ripple="true" type="primary" @click="download('android')">
				<u-icon name="android-fill"></u-icon>
				Android下载
			</u-button>
		</view> -->
        <view class="btnBox">
            <view @click="download('ios')" class="btn">
                <u-icon name="apple-fill"></u-icon>
                iPhone下载
            </view>
            <view @click="download('android')" class="btn">
                <u-icon name="android-fill"></u-icon>
                Android下载
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isWeixinBrowser: false,
            //iosapp下载链接集合和安卓app下载链接集合，租户ios上架后已经安卓包上传到对应的oss后，把连个链接拿来，同时在h5我的页面，下载按钮解开限制
            iosLink: {
                rich: 'https://apps.apple.com/us/app/Rich购-先享后付/id6499086811'
            },
            androidLink: {
                rich: 'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/Rich.apk'
            }
        };
    },
    onLoad() {},
    mounted() {
        // #ifdef H5
        if (document.querySelector('.uni-placeholder')) {
            document.querySelector('.uni-placeholder').style.display = 'none';
        }
        if (document.querySelector('.uni-page-head')) {
            document.querySelector('.uni-page-head').style.display = 'none';
        }
        // #endif
        console.log('==当前h5是哪家==', this.$appName, this.$appNameDict[this.$appName]);
    },
    methods: {
        isWeixin() {
            var ua = window.navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                return true; // 微信中打开
            } else {
                return false;
            }
        },
        download(type) {
            let appleId = 'id6499086811';
            // #ifdef APP
            if (type == 'android') {
                // 跳转安卓应用市场
                let appurl = 'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/Rich.apk';
                // let appurl = 'market://details?id=com.tencent.mm'; //这个是通用应用市场，如果想指定某个应用商店，需要单独查这个应用商店的包名或scheme及参数
                plus.runtime.openURL(appurl);
            } else {
                // 跳转AppStore
                let appStoreScheme = `itms-apps://itunes.apple.com/app/${appleId}`;
                plus.runtime.openURL(appStoreScheme, (res) => {
                    uni.showToast({
                        title: 'AppStore打开失败，请自行前往下载。',
                        icon: 'none'
                    });
                });
                // plus.runtime.launchApplication({
                //     action: appStoreScheme,
                //     function(e) {
                //         console.log('Open system default browser failed: ' + e.message);
                //     }
                // });
            }
            // #endif
            // #ifndef APP
            if (type === 'ios') {
                // let url = encodeURIComponent(`https://apps.apple.com/us/app/卡神购-先享后付/${appleId}`);
                console.log('=点击了下载苹果的=当前h5是哪家==', this.$appName, this.$appNameDict[this.$appName], this.iosLink[this.$appName]);
                let iosToLink = this.iosLink[this.$appName];
                window.location.href = iosToLink;
                if (this.isWeixin()) {
                    this.isWeixinBrowser = true;
                }
            } else {
                console.log('=点击了下载安卓的=当前h5是哪家==', this.$appName, this.$appNameDict[this.$appName], this.androidLink[this.$appName]);
                let androidToLink = this.androidLink[this.$appName];
                window.location.href = androidToLink;
                if (this.isWeixin()) {
                    this.isWeixinBrowser = true;
                }
            }
            // #endif
        },
        handelConfirmButton() {
            // 点击确认按钮点击事件
            let osName = plus.os.name;
            if (osName.toLowerCase() == 'ios') {
                let appleId = 'id6499086811';
                let appStoreScheme = `itms-apps://itunes.apple.com/app/${appleId}`;
                plus.runtime.openURL(appStoreScheme, (res) => {
                    uni.showToast({
                        icon: 'none',
                        title: 'AppStore打开失败，请自行前往下载。'
                    });
                });
            } else {
                // 安卓直接打开应用宝的URL
                plus.runtime.openURL('https://a.app.qq.com/o/simple.jsp?pkgname=com.zhanxiongdj&fromcase=40003');
            }
        }
    }
};
</script>

<style lang="less" scoped>
.contanier {
    position: relative;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100%;
    background-image: url(@/static/tenant/download_bkg.png);
    background-color: #d71503;
    .btnBox {
        display: flex;
        justify-content: center;
        position: absolute;
        bottom: 16%;
        width: 100%;
        color: #cc0814;
        .btn {
            border-radius: 20rpx;
            overflow: hidden;
            box-sizing: border-box;
            padding: 20rpx 40rpx;
            background-color: #fff;
            text-align: center;
            & + .btn {
                margin-left: 6%;
            }
            .u-icon {
                margin-right: 10rpx;
            }
        }
    }

    &.contanier-default-open {
        &::after {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 100%;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 5;
            content: '';
        }

        &::before {
            position: absolute;
            right: 35rpx;
            top: -15rpx;
            content: '';
            background: url(./open.png) center/contain no-repeat;
            width: 200rpx;
            height: 150rpx;
            z-index: 6;
        }
    }
}
</style>
